<template>
    <view >
		<u-row customStyle="margin-bottom: 10px">
			<u-col span="9">  
			<!-- 模糊查找 -->
				<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入设备号" clearButton="auto" bgColor="#ffffff"
					cancelButton="auto" @input="input" v-model="searchValue" />
			</u-col>
			<u-col span="3">
				<!-- 通过扫码查找  -->
				<button @click="sweep" class="sweep-bt">
					<image src="https://cdnjson.com/images/2023/09/26/987a9d501811c03b63684197591990d2.png" style="width: 20px; height: 20px;"></image>
					<text style="font-size: 13px; padding-left: 3px;">扫一扫</text>
				</button>
			</u-col>
		</u-row>
		
        <view class="cu-card dynamic" v-for="(item,index) in workerOrderList" :key="index">
            <view class="cu-item shadow" @click="listMore(item)">
                <view class="cu-list menu-avatar">
                    <view class="cu-item">
                        <!-- <view class="cu-avatar round lg" style="background-image: url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
                        <view class="content flex-sub">
                            <view class="text-gray text-sm flex justify-between" v-if="item.dispatchedPersonnel != '' && item.dispatchedPersonnel != null ">
                               售后人员(AfterSale)：{{item.dispatchedPersonnel}}
                            </view>
							<view class="text-gray text-sm flex justify-between" v-else >
							   售后人员(AfterSale)：暂无(null)
							</view>
                        </view>
                    </view>
                </view>
				<view class="text-content"> 
				    设备号： {{item.serialnumber}}
				</view>
				<view class="englishInfo">Device number</view>
                <view class="text-content"> 
                    故障时间： {{item.worktime}}
                </view>
				<view class="englishInfo">Fault Time</view>
                <view class="text-content">
					<text class="text"> 问题描述：{{item.problemdescription}}</text>
                </view>
				<view class="englishInfo">Problem Description</view>
				<view class="text-content">
					口令码：{{item.passwordCode}}
				</view>
				<view class="englishInfo">Password code</view>
				<!--   状态 判断  -->
				<u-row customStyle="margin-bottom: 10px; margin-left: 13px">
					<u-col span="4">
						<view class="text">工单状态：</view>
						<view class="englishInfo">Order Status</view>
					</u-col>
					<u-col span="8" customStyle="margin-left: 18px">
						<view v-if="item.evaluationNum == 0 && item.status == '已完成' " >
							<view class="u-demo-block__content">
								<view class="u-page__tag-item">
									<u-tag text="工单已完成"></u-tag>
								</view>
								<view class="u-page__tag-item">
									<u-tag type="warning" text="待评价"></u-tag>
								</view>
							</view>
						</view>
						<view v-else-if="item.status == '未完成'">
							<view class="u-demo-block__content">
								<view class="u-page__tag-item">
									<u-tag type="warning" text="工单未完成"></u-tag>
								</view>
								<view class="u-page__tag-item">
									<u-tag type="warning" text="无法评价"></u-tag>
								</view>
							</view>
						</view>
						
						<view v-else-if="item.evaluationNum != 0 && item.status == '已完成' ">
							<view class="u-demo-block__content">
								<view class="u-page__tag-item">
									<u-tag text="工单已完成"></u-tag>
								</view>
								<view class="u-page__tag-item">
									<u-tag text="已评价"></u-tag>
								</view>
							</view>
							
							<!-- 工单已完成---已评价 -->
						</view>
						
					</u-col>
					
					<!-- <u-col span="4">
						 <view class="text-gray text-sm text-right padding"  v-if="item.status == '已完成'" style="color: aqua;">
							<text class="cuIcon-attentionfill margin-lr-xs"></text> 
								 completed
						</view>
						<view class="text-gray text-sm text-right padding"  v-else  style= "color: crimson;">
							<text class="cuIcon-attentionfill margin-lr-xs"></text> 
								unfinished
						</view>
					</u-col> -->
				</u-row>
				
				
            </view>
        </view>
		<!--   数据 为空  -->
		<template v-if="empty==0">
			<u-empty
				textSize = '15'
				mode = "data"
				icon = "https://cdnjson.com/images/2023/10/17/cbbd3de693b44e84afe2593f449acbb6.png"
			>
			</u-empty>
		</template>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				search:'',
				searchValue:'',
                empty:0,
                workerOrderList: [],
				openid: '',
            };
        },

		onLoad() {
			this.openid = uni.getStorageSync('clientOpenid')
			console.log(this.openid)
			this.workerOrderList = []
			uni.request({
				url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findWorkOrderByopenid',
				// url: "http://192.168.3.7:8080/workOrder/workOrder/findWorkOrderByopenid",
				method: 'GET',
				data:{ openid: this.openid },
				success: (res) => {
					console.log(res,"*********************")
					if (res.data.data.length != 0) {
						this.empty = 1 
						for (var i = 0; i < res.data.data.length; i++) {
							this.workerOrderList.push(res.data.data[i]) 
						}
					} else{
						this.empty = 0
					}
				}
			})
		},
        methods: {
			sweep(){  // 扫一扫 
				uni.scanCode({
					success: (res) => {
						this.searchValue = res.result
					}
				})
			},
			// 搜索
			input(e) {
				// 清除 timer 对应的延时器
				clearTimeout(this.timer)
				// 重新启动一个延时器，并把 timerId 赋值给 this.timer
				this.timer = setTimeout(() => {
					// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
					this.search = e; // 获取输入的搜索关键字
					console.log("--搜索---",this.search)
					if (this.search == '' || this.search == null) {
						this.workerOrderList = []
						uni.request({
							url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findWorkOrderByopenid',
							method: 'GET',
							data:{ openid: this.openid },
							success: (res) => {
								// console.log(res,"-*-----")
								if (res.data.data.length != 0) {
									this.empty = 1 
									for (var i = 0; i < res.data.data.length; i++) {
										this.workerOrderList.push(res.data.data[i]) 
									}
								} else{
									this.empty = 0
								}
							}
						})
						
					} else{
						this.workerOrderList = []
						uni.request({
							url:'https://www.smacaftersales.com:443/workOrder/workOrder/findWorkOrderByserialnumber',
							method:'GET',
							data:{ serialnumber: this.search,
							openid: this.openid },
							success: (res) => {
								// console.log(res,'987987')
								if (res.data.data.length != 0) {
									this.empty = 1 
									for (var i = 0; i < res.data.data.length; i++) {
										this.workerOrderList.push(res.data.data[i]) 
									}
								} else{
									this.empty = 0
								}
							}
						})
					}	
				}, 1000)
			},
			listMore(item){
				// console.log("选择列表",workid)
				let data = { 
					workid: item.workid ,
					evaluationNum: item.evaluationNum
				}
				uni.navigateTo({
					url: '/pages/clientVue/afterSalesRecordInfo?data=' + encodeURIComponent(JSON.stringify(data))
				})
			}
		},
		onUnload() {    // 监听页面卸载
			uni.switchTab({
				url: '/pages/clientVue/my-client'
			})
		},
		onPullDownRefresh() {
			console.log('下拉刷新请求-------------',this.searchValue);
			this.workerOrderList = [];
			if (this.searchValue =='' || this.search == null) {
				uni.request({
					url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findWorkOrderByopenid',
					method: 'GET',
					data:{ openid: this.openid },
					success: (res) => {
						console.log(res)
						if (res.data.data.length != 0) {
							this.empty = 1 
							for (var i = 0; i < res.data.data.length; i++) {
								this.workerOrderList.push(res.data.data[i]) 
							}
						} else{
							this.empty = 0
						}
					}
				})
			} else{
				uni.request({
					url:'https://www.smacaftersales.com:443/workOrder/workOrder/findWorkOrderByserialnumber',
					method:'GET',
					data:{ serialnumber: this.search,
					openid: this.openid },
					success: (res) => {
						console.log(res)
						if (res.data.data.length != 0) {
							this.empty = 1 
							for (var i = 0; i < res.data.data.length; i++) {
								this.workerOrderList.push(res.data.data[i]) 
							}
						} else{
							this.empty = 0
						}
					}
				})
			}
			uni.stopPullDownRefresh() // 终止刷新 
		},
		
    }
</script>
<style lang="scss">
	//  标签 样式
	.u-page__tag-item {
		margin-right: 20px;
		display: flex;
		 align-items: center;
	}

	.u-demo-block__content {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		display: flex;
	}
	// end 

	.englishInfo{
		font-size: 13px;
		display: flex;
		color: #74daff;
		align-items: center;//子控件垂直居中
		// justify-content: center;//子控件水平居中
	}
	.sweep-bt{
		border-radius: 15px;
		height: 35px;
		display: flex;  
		justify-content: center; //水平居中
		align-items: center;
	}
	.sweep-bt:after{
		border: none;
	}
    .cu-card.dynamic>.cu-item>.text-content {
        margin-bottom: 1px;
        margin-top: 6px;
		
		width: 90%;
		/* overflow: hidden; */
    }
	.text {
		color: #9f9f9f;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; 
		display: block;  
	}
</style>
